<template>
    <div class="add">
        <div class="top">
            <p>添加用户</p>
            <i class="el-icon-close" @click="close"></i>
        </div>
        <div class="content">
           <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item class="right">
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </el-form-item>
        </el-form>

          
        </div>
    </div>
</template>

<script>
import { addlist,list} from "../api/api.js"
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password:'',
                email:'',
                phone:''
            },
            rules: {
            username: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password:[
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ]
            }
        };
    },
    methods: {
        // 关闭
        close(){
            console.log(111);
            this.$emit('success',false);
        },
        //取消按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 确认按钮
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (this.ruleForm.username&&this.ruleForm.password&&this.ruleForm.email&&this.ruleForm.phone!='') {
                this.addlist();
                this.ruleForm={
                    username:"",
                    password:"",
                    email:"",
                    phone:""  
                }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //添加用户
        addlist(){
            addlist({
                username:this.ruleForm.username,
                password:this.ruleForm.password,
                email:this.ruleForm.email,
                mobile:this.ruleForm.phone
            }).then(res=>{
                console.log(res)
                if(res.data.meta.status>=200&&res.data.meta.status<300){
                console.log("添加用户",res);
                this.$emit('success',true);
                }
            })
        },
    }
  }
</script>

<style scoped lang="scss">
    .add{
        position: absolute;
        width: 72%;
        height: 70%;
        border: 1px solid yellow;
        z-index: 99;
        top: 42px;
        left: 150px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        box-sizing: border-box;
        display:flex;
        flex-direction: column;
        .top{
            display:flex;
            flex-direction: row;
            justify-content : space-between;
            font-size:18px;
            padding:22px 25px 45px 25px;
        }
        .content{
            width:95%;
            height:74%;
            margin:0 auto;
            .right{
                display:flex;
                flex-direction:row-reverse;
                margin-top:60px;
            }
        }
    }
</style>
